<template>
  <div class="win-op no-drag">
    <div v-if="showSetTop" :title="isTop ? '取消置顶' : '置顶'" @click="top"><span
      :class="['iconfont icon-top ', isTop ? 'win-top' : '']"></span></div>
    <div v-if="showMin" title="最小化" @click="minimize"><span class="iconfont icon-min"></span></div>
    <div v-if="showMax" :title="isMax ? '向下还原' : '最大化'" @click="maximize"><span
      :class="['iconfont ', isMax ? 'icon-maximize' : 'icon-max']"></span></div>
    <div v-if="showClose" title="关闭" @click="close"><span class="iconfont icon-close"></span></div>
  </div>
</template>

<script setup>
import { getCurrentInstance, onMounted, ref } from 'vue'

const { proxy } = getCurrentInstance()

const props = defineProps({
  showSetTop: {
    type: Boolean,
    default: true
  },
  showMin: {
    type: Boolean,
    default: true
  },
  showMax: {
    type: Boolean,
    default: true
  },
  showClose: {
    type: Boolean,
    default: true
  },
  //关闭类型 0:关闭，1:隐藏
  closeType: {
    type: Number,
    default: 1
  }
})

const emit = defineEmits(['closeCallback'])

onMounted(() => {
  isMax.value = false
})

//窗口操作
const winOp = (action, data) => {
  window.ipcRenderer.send('winTitleOp', { action, data })
}

//关闭窗口
const close = () => {
  winOp('close', { closeType: props.closeType })
  emit('closeCallback')
}
//最小化
const minimize = () => {
  winOp('minimize')
}

const isMax = ref(false)
const isTop = ref(false)

//最大化
const maximize = () => {
  if (isMax.value) {
    winOp('unmaximize')
    isMax.value = false
  } else {
    winOp('maximize')
    isMax.value = true
  }
}

//置顶窗口
const top = () => {
  isTop.value = !isTop.value
  winOp('top', { top: isTop.value })
}
</script>

<style lang="scss" scoped>
.win-op {
  top: 0;
  right: 0;
  position: absolute;
  z-index: 10;
  //overflow: hidden;
  display: flex;

  .iconfont {
    top: 0;
    left: 0;
    font-size: 12px;
    color: #101010;
    text-align: center;
    display: flex;
    justify-content: center;
    cursor: pointer;
    height: 25px;
    align-items: center;
    padding: 0px 10px;

    & {
      :hover {
        background-color: #ddd;
      }
    }
  }

  .icon-close {

    & {
      :hover {
        background: #fb7373;
        color: #fff;
      }
    }
  }

  .win-top {
    //background: #ddd;
    color: #07c160;
  }
}

</style>
